<script lang="ts" setup>
import { computed } from 'vue';

interface ButtonProps {
	type?: string;
	shape?: string;
	block?: boolean;
	padding?: string;
	size?: string;
	bgColor?: string;
}

const props = withDefaults(defineProps<ButtonProps>(), {
	type: 'default',
	shape: 'square',
	block: false,
	padding: '16rpx 24rpx',
	size: '24rpx'
});

const classNames = computed(() => {
	return {
		'um-button': true,
		['um-button__' + props.type]: true,
		['um-button__' + props.shape]: true,
		'um-button__block': props.block
	};
});

const styles = computed(() => {
	return {
		padding: props.padding,
		fontSize: props.size,
		backgroundColor: props.bgColor
	};
});
</script>

<template>
	<view :class="classNames">
		<button class="button" :style="styles"><slot></slot></button>
	</view>
</template>

<style lang="scss" scoped>
.um-button {
	.button {
		border-radius: 6rpx;
		display: block;
		line-height: 24rpx;
	}

	&__block {
		.button {
			display: block;
		}
	}

	&__circle {
		.button {
			border-radius: 200rpx;
		}
	}
	//1
	&__gray {
		.button {
			color: #fff;
			background: $uni-bg-color-grey;
		}
	}

	&__primary {
		.button {
			color: #fff;
			background: $uni-color-primary;
		}
	}
}
</style>
